<template>  
  <el-container>


    
      <el-header>
            <el-menu  class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1" ><img class="a" src="../tlc/img/用户,头像.png"/></el-menu-item>
                <span class="sjyh">司机用户</span>
                <!-- <div>
                  <el-avatar class="a" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div> -->
            </el-menu>
        </el-header>
        <br/>
       
        <el-card class="box-card">
           <h2 class="rz">我的认证信息</h2>
           <br/>
            <br/>
              <div class="text item">
                   <br/>
              <div style="margin-top: 5px;">
                  <el-menu  :default-active="activeIndex2" class="wc" mode="horizontal"  @select="handleSelect"  background-color="#f0f4ee00"
                text-color="#fff"
                active-text-color="#a0d919" style="width:100%">
           
                <el-menu-item index="4" class="a1"> <router-link :underline="false" to="/smyz"><img src="../tlc/img/实名认证 (10).png"/><span class="zt">实名认证</span></router-link><span></span></el-menu-item>
                <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/wdrw"><img  src="../tlc/img/实名认证 (8).png"/><span class="zt">司机认证</span></router-link><span></span></el-menu-item>
                <el-menu-item index="4" class="a4"> <router-link :underline="false" to="/wdrw"><img  src="../tlc/img/爱车.png"/><span class="zt">我的车辆</span></router-link><span></span></el-menu-item>

              </el-menu>
                </div>
              </div>
        </el-card>
       <el-main>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            
              <h4>常用功能</h4>
                           <el-collapse>
                       <img src="../tlc/img/我的.png"  class="zt2"/><span class="zt1"> 我的日报 </span>
                          <br/>
                        <el-collapse-item>
                        </el-collapse-item>
                     
                         <img src="../tlc/img/加油台.png" class="zt2"/><span class="zt1">加油加气 </span>
                               <br/>
                        <el-collapse-item >
                        </el-collapse-item>
                   
                         <img src="../tlc/img/日常2_车-轿车-小汽车.png" class="zt2"/><span class="zt1">我的车队  </span>
                              <br/>
                        <el-collapse-item >
                        </el-collapse-item>
                     
                          <img src="../tlc/img/安全_2.png" class="zt2"/><span class="zt1">安全中心 </span>
                            <br/>
                        <el-collapse-item >
                        </el-collapse-item>
                         <img src="../tlc/img/客服 (1).png" class="zt2"/><span class="zt1">在线客服 </span>
                            <br/>
                        <el-collapse-item >
                        </el-collapse-item>
                          <img src="../tlc/img/更多 (1).png" class="zt2"/><span class="zt1">更多   </span>
                           <br/>
                       <el-collapse-item >
                        </el-collapse-item>
                      </el-collapse>
       
          </el-main>

          <el-footer class="ss"> 
          <h1><img src="../tlc/img/11.png" style="width:100%"/></h1>
        </el-footer>
  </el-container>
</template>

<script>
 export default {
    data() {
      return { 
       input3: '',
        activeName1: 'second',
        activeIndex: '1',
        activeIndex2: '1',
        
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      
      },
 }
</script>

<style scoped>
.sjyh{
   float:left; 
   left:15px;
     position: relative;
 font-size: 25px;
}
.a{
   float:left; 
    left:10px;
     position: relative;
      margin: -20px auto; 
}
.el-collapse-item{
   position: relative;
  font-size: 29px;
}
.zt1{
   font-size: 18px;
    float:left; 
    left:20px;
     position: relative;
}
.zt2{
   font-size: 18px;
    float:left ; 
    left: 10px;
     position: relative;
}
.zt{

     margin: -20px auto; 
    text-align: center;
   font-size: 29px;
   color: rgba(9, 0, 0, 0.846);
     position: relative;
}
.el-select .el-input {
    width: 50px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: rgb(254, 248, 248);
  }

.text {
    font-size: 14px;
  }
.item {
    padding: 18px 0;
  }

.tp{
    position: relative;
  height: 600px;
}
.ss{
  width: 1500px;
   position: relative;
}
.rz{
   float:left ; 
    left: 60px;
}

  .item {
    padding: 18px 0;
  }
 .box-card {
    float:left ; 
    left: 50px;
    position:absolute;
    font: 100;
    width: 1400px;
    height: 230px;
    margin: 90px auto; 
    background-color: rgba(247, 248, 247, 0.006);

  }
  
.el-carousel__item h1 {
    color: #f0f4ee00;
    font-size: 18px;
    opacity: 0.75;
    line-height: 1000px;
    margin: 0;
  }

.el-menu-demo{
   width: 1460px;
  margin: 16px auto; 
}
.el-main {
  background-color: #f4f6f900;
  color: #333;
  font-size: 25px;
  text-align: center;
  line-height: 40px;
    border-radius: 4px
}
.wc{
    margin: 0px auto; 
  height: 130px;
  position: relative;

}
.ww{
  background-color: #eaf0ff;
  width:350px;
  height:250px;
   position: relative;
    left:10px;
    margin: -5px auto; 
   text-align: center;
}
.w2{
  background-color: #eaf0ff;
  width:350px;
  height:250px;
   position: relative;
    left: 40px;
    margin: -5px auto; 
   text-align: center;
}
.w1{
  background-color: #eaf0ff;
  width:350px;
  height:250px;
   position: relative;
    left: 30px;
    margin: -5px auto; 
   text-align: center;
}


 .time {
    font-size: 13px;
    color: #999;
  }
  
.a1{
  position: relative;
  left: 180px;
}
.a3{
  position: relative;
  left: 350px;
}
.a4{
  position: relative;
  left: 510px;
}

</style>